<template>
  <div>
    <Card :bordered="false" dis-hover class="ivu-mt" :padding="0">
        <div class="new_card_pd">
          <!-- 筛选条件 -->
          <Form ref="searchForm" :model="tableFrom" inline :label-width="labelWidth" :label-position="labelPosition" @submit.native.prevent>
            <FormItem label="时间选择：" prop="time">
              <DatePicker
                :editable="false"
                :clearable="true"
                @on-change="onchangeTime"
                :value="timeVal"
                format="yyyy/MM/dd"
                type="datetimerange"
                placement="bottom-start"
                placeholder="自定义时间"
                class="input-add mr20"
                :options="options"
                style="width:250px;"></DatePicker>
            </FormItem>
            <FormItem label="用户名称：" prop="username">
              <Input v-model="tableFrom.username"  placeholder="请输入用户名称" @keyup.enter.native="getList(1)" clearable style="width:250px;"/>
            </FormItem>
            <FormItem label="关键字：" prop="keyword">
              <Input v-model="tableFrom.keyword"  placeholder="请输入评论内容" @keyup.enter.native="getList(1)" clearable style="width:250px;"/>
            </FormItem>
            <FormItem>
              <Button type="primary" @click="getList(1)" style="margin-right: 10px;;">查询</Button>
              <Button class="ResetSearch" @click="searchReset('searchForm')">重置</Button>
            </FormItem>
          </Form>
        </div>
    </Card>
    <Card :bordered="false" dis-hover class="ivu-mt listbox">
      <div class="new_tab">
        <vxe-table
          :data="tableData"
          ref="xTable"
          class="ivu-mt"
          highlight-hover-row
          :loading="listLoading"
          header-row-class-name="false"
          row-id="id"
          :tree-config="{lazy: true, children: 'children',hasChild: 'children',reserve: true}">
        <vxe-column field="reply_id" title="ID" min-width="80"></vxe-column>
        <vxe-column field="author.nickname" title="用户名/UID" min-width="100">
          <template v-slot="{ row }">
            <span>{{ row.author.nickname +  ' / '  + row.author.uid }}</span>
          </template>
        </vxe-column>
        <vxe-column field="community.title" title="文章标题" min-width="100"></vxe-column>
        <vxe-column field="content" title="评论内容" min-width="100"></vxe-column>
        <vxe-column field="count_reply" title="评论条数" min-width="100"></vxe-column>
        <vxe-column field="count_start" title="评论点赞数" min-width="150"></vxe-column>
        <vxe-column field="create_time" title="评论时间" min-width="150"></vxe-column>
        <vxe-column title="状态" min-width="100">
          <template v-slot="{ row }">
            <span>{{ row.status | communityStatus }}</span>
            <span
              v-if="row.status == -1"
              style="display: block; font-size: 12px; color: red;"
            >原因： {{ row.refusal }}</span>
          </template>
        </vxe-column>
        <vxe-column field="action" title="操作" align="center" min-width="200" fixed="right">
          <template v-slot="{ row,index }">
            <a @click="getAllReply(row.reply_id)"  v-if="row.hasReply !== null">查看回复</a>
            <Divider type="vertical" v-if="row.hasReply !== null"/>
            <a v-if="row.status == 0" @click="handleReview(row.reply_id)">审核</a>
            <Divider type="vertical" v-if="row.status == 0"/>
            <a @click="del(row,'删除该评论',index)">删除</a>
          </template>
        </vxe-column>
      </vxe-table>
      <vxe-pager class="mt20" border size="medium" :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Total']"
        :current-page="tableFrom.page"
        :page-size="tableFrom.limit"
        :total="total"
        @page-change="handlePageChange">
      </vxe-pager>
      </div>
    </Card>
    <!--所有评论-->
    <Modal v-model="dialogVisible"  title="所有评论" :visible.sync="dialogVisible" width="800px" :before-close="handleClose">
      <vxe-table
          :data="replyData.data"
          ref="xTables"
          class="ivu-mt"
          highlight-hover-row
          :loading="replyLoading"
          header-row-class-name="false"
          row-id="id"
          :tree-config="{lazy: true, children: 'children',hasChild: 'children',reserve: true}">
        <vxe-column field="reply_id" title="ID" min-width="80"></vxe-column>
        <vxe-column field="community.title" title="文章标题" min-width="100"></vxe-column>
        <vxe-column field="content" title="评论内容" min-width="100"></vxe-column>
        <vxe-column field="count_reply" title="评论条数" min-width="100"></vxe-column>
        <vxe-column field="count_start" title="评论点赞数" min-width="150"></vxe-column>
        <vxe-column field="create_time" title="评论时间" min-width="150"></vxe-column>
      </vxe-table>
      <vxe-pager class="mt20" border size="medium" :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Total']"
        :current-page="replyForm.page"
        :page-size="replyForm.limit"
        :total="replyData.total"
        @page-change="replyPageChange">
      </vxe-pager>
      <div slot="footer"></div>
    </Modal>
  </div>
</template>

<script>
import { mapState } from 'vuex';
import { communityReplyListApi, communityReplyDeleteApi, communityReviewApi } from "@/api/community";
import timeOptions from '@/utils/timeOptions'
export default {
  name: "communityComment",
  data() {
    return {
      tableData: [],
      total:0,
      replyData: {
        data: [],
        total: 0,
      },
      listLoading: true,
      replyLoading: true,
      tableFrom: {
        page: 1,
        limit: 20,
        community_id: this.$route.query.community_id ? this.$route.query.community_id : "",
        date: "",
        username: "",
        keyword: "",
      },
      replyForm: {
        page: 1,
        limit: 10,
        pid: ''
      },
      timeVal: [],
      props: {},
      tabClickIndex: '',
      dialogVisible: false,
      reply_id: "",
      options: timeOptions
    };
  },
  computed:{
    ...mapState('admin/layout', [
          'isMobile'
      ]),
    labelWidth () {
      return this.isMobile ? undefined : 96;
    },
    labelPosition () {
      return this.isMobile ? 'top' : 'right';
    }
  },
  mounted() {
    this.getList(1);
  },
  methods: {
    handlePageChange ({ currentPage, pageSize }) {
      this.tableFrom.page = currentPage
      this.tableFrom.limit = pageSize
      this.getList(1)
    },
     /**重置 */
    searchReset(){
      this.timeVal = []
      this.tableFrom.date = ""
      this.$refs.searchForm.resetFields()
      this.getList(1)
    },
    // 具体日期
    onchangeTime(e) {
      this.timeVal = e;
      this.tableFrom.date = this.timeVal ? this.timeVal.join("-") : "";
      this.tableFrom.page = 1;
      this.getList(1);
    },
    // 列表
    getList(num) {
      this.listLoading = true;
      this.tableFrom.page = num ? num : this.tableFrom.page;
      communityReplyListApi(this.tableFrom)
        .then((res) => {
          this.tableData = res.data.list;
          this.total = res.data.count;
          this.listLoading = false;
        })
        .catch((res) => {
          this.listLoading = false;
          this.$message.error(res.message);
        });
    },
    pageChange(page) {
      this.tableFrom.page = page;
      this.getList('');
    },
    handleSizeChange(val) {
      this.tableFrom.limit = val;
      this.getList('');
    },
    // 删除
    del (row, tit, num) {
      let delfromData = {
          title: tit,
          num: num,
          url: `community/reply/delete/${row.reply_id}`,
          method: 'DELETE',
          ids: ''
      };
      this.$modalSure(delfromData).then((res) => {
          this.tableData.splice(num,1);
          this.$Message.success(res.msg);
      }).catch(res => {
          this.$Message.error(res.msg);
      });
    },
    // 审核
    handleReview(id){
      this.$modalForm(communityReviewApi(id)).then(() => this.getList(''));
    },
    replyPageChange(page) {
      this.replyForm.page = page;
      this.getReplyList()
    },
    replySizeChange(val) {
      this.replyForm.limit = val;
      this.getReplyList()
    },
    //查看所有评论
    getAllReply(id){
      this.dialogVisible = true
      this.replyForm.pid = id
      this.getReplyList()
    },
    getReplyList(){
      this.replyLoading = true;
      communityReplyListApi(this.replyForm)
        .then((res) => {
          this.replyData.data = res.data.list;
          this.replyData.total = res.data.count;
          this.replyLoading = false;
        })
        .catch((res) => {
          this.replyLoading = false;
          this.$Message.error(res.msg);
        });
    },
    handleClose(){
      this.dialogVisible = false
    }
  },
};
</script>
<style scoped lang="stylus">
/deep/.ivu-rate-star-full:before{
  color: #99A9BF;
}
/deep/.ivu-dropdown-item{
  font-size: 12px!important;
}
/deep/.vxe-table--render-default .vxe-cell{
  font-size: 12px;
}
.expand-row{
  margin-bottom: 16px;
  font-size: 12px;
}
.tdinfo {
  margin-left: 88px;
  margin-top: 15px;
}
.padding-add {
  padding: 20px 20px 0;
}
.input-add {
  max-width:250px;
}
.labelInput {
  max-width:250px;
  border: 1px solid #dcdee2;
  padding: 0 5px;
  border-radius: 5px;
  min-height: 30px;
  cursor: pointer;

  .span {
    color: #c5c8ce;
  }

  .iconxiayi {
    font-size: 12px;
  }
}

.picBox {
  display: inline-block;
  cursor: pointer;

  .upLoad {
    width: 58px;
    height: 58px;
    line-height: 58px;
    border: 1px dotted rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.02);
  }

  .pictrue {
    width: 60px;
    height: 60px;
    border: 1px dotted rgba(0, 0, 0, 0.1);
    margin-right: 10px;

    img {
      width: 100%;
      height: 100%;
    }
  }
}

.userFrom {
  >>> .ivu-form-item-content {
    margin-left: 0px !important;
  }
}

.userAlert {
  margin-top: 20px;
}

.userI {
  color: #1890FF;
  font-style: normal;
}

img {
  height: 36px;
  display: block;
}

.tabBox_img {
  width: 36px;
  height: 36px;
  border-radius: 4px;
  cursor: pointer;

  img {
    width: 100%;
    height: 100%;
  }
}

.tabBox_tit {
  width: 60%;
  font-size: 12px !important;
  margin: 0 2px 0 10px;
  letter-spacing: 1px;
  padding: 5px 0;
  box-sizing: border-box;
}

.modelBox {
  >>> .ivu-modal-body {
    padding: 0 16px 16px 16px !important;
  }
}

.vipName {
  color: #dab176;
}

.listbox {
  >>>.ivu-divider-horizontal {
    margin: 0 !important;
  }
}

/deep/.ivu-table-header {
  // overflow visible
}

/deep/.ivu-table th {
  overflow: visible;
}

/deep/.select-item:hover {
  background-color: #f3f3f3;
}

/deep/.select-on {
  display: block;
}

/deep/.select-item.on {
  /* background: #f3f3f3; */
}
.pane_pd{
  padding:4px 16px 20px !important;
  font-weight: 500;
}

</style>

